<template>
  <div class="data-screen">
    <!-- 顶部标题栏 -->
    <div class="screen-header">
      <div class="header-left" />
      <div class="header-center">
        <h1 class="main-title">烟草智慧投放平台</h1>
      </div>
      <div class="header-right">
        <div class="datetime">
          <span class="date">{{ currentDate }}</span>
          <span class="time">{{ currentTime }}</span>
        </div>
        <div class="week">星期{{ currentWeek }}</div>
      </div>
    </div>

    <!-- 主体内容区 -->
    <div class="screen-body">
      <!-- 左侧列 -->
      <div class="screen-left">
        <!-- 图表1 - 柱状图 -->
        <div class="chart-panel">
          <div class="panel-header">
            <span class="panel-title">2024年</span>
            <span class="panel-subtitle">品牌销量</span>
          </div>
          <div class="panel-body">
            <div ref="chart1" class="chart-container"></div>
          </div>
        </div>

        <!-- 图表2 - 折线图 -->
        <div class="chart-panel">
          <div class="panel-header">
            <span class="panel-title">2023年</span>
            <span class="panel-subtitle">品牌销量</span>
          </div>
          <div class="panel-body">
            <div ref="chart2" class="chart-container"></div>
          </div>
        </div>

        <!-- 图表3 - 柱状图 -->
        <div class="chart-panel">
          <div class="panel-header">
            <span class="panel-title">2022年</span>
            <span class="panel-subtitle">品牌销量</span>
          </div>
          <div class="panel-body">
            <div ref="chart3" class="chart-container"></div>
          </div>
        </div>
      </div>

      <!-- 中间和右侧合并区域 - 三个饼图 -->
      <div class="screen-center-right">
        <!-- 2024年营业部销量饼图 -->
        <div class="chart-panel">
          <div class="panel-header">
            <span class="panel-title">2024年</span>
            <span class="panel-subtitle">各营业部销量</span>
          </div>
          <div class="panel-body">
            <div ref="pieChart2024" class="chart-container"></div>
          </div>
        </div>

        <!-- 2023年营业部销量饼图 -->
        <div class="chart-panel">
          <div class="panel-header">
            <span class="panel-title">2023年</span>
            <span class="panel-subtitle">各营业部销量</span>
          </div>
          <div class="panel-body">
            <div ref="pieChart2023" class="chart-container"></div>
          </div>
        </div>

        <!-- 2022年营业部销量饼图 -->
        <div class="chart-panel">
          <div class="panel-header">
            <span class="panel-title">2022年</span>
            <span class="panel-subtitle">各营业部销量</span>
          </div>
          <div class="panel-body">
            <div ref="pieChart2022" class="chart-container"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { listTable } from '#/api/operate/salesForecast/show';

// 时间相关
const currentDate = ref('');
const currentTime = ref('');
const currentWeek = ref('');

// 图表引用
const chart1 = ref<HTMLElement>();
const chart2 = ref<HTMLElement>();
const chart3 = ref<HTMLElement>();
const pieChart2024 = ref<HTMLElement>();
const pieChart2023 = ref<HTMLElement>();
const pieChart2022 = ref<HTMLElement>();

let timer: NodeJS.Timeout;
const charts: echarts.ECharts[] = [];

// 更新时间
const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  currentDate.value = `${year}/${month}/${day}`;
  currentTime.value = `${hours}:${minutes}:${seconds}`;

  const weeks = ['日', '一', '二', '三', '四', '五', '六'];
  currentWeek.value = weeks[now.getDay()] || '日';
};

// 初始化图表
const initCharts = async () => {
  // 图表1 - 品牌销售柱状图（从API获取数据）
  if (chart1.value) {
    const chart = echarts.init(chart1.value);
    
    try {
      // 从API获取销售数据
      const res = await listTable({});
      const dataList = Array.isArray(res) ? res : (res.rows || []);
      
      // 按品牌汇总数据
      const brandData: any = {};
      dataList.forEach((item: any) => {
        const brand = item.brand || '未知品牌';
        if (!brandData[brand]) {
          brandData[brand] = {
            sales_2022: 0,
            sales_2023: 0,
            sales_2024: 0
          };
        }
        brandData[brand].sales_2022 += Number(item.sales_qty_2022_total || 0);
        brandData[brand].sales_2023 += Number(item.sales_qty_2023_total || 0);
        brandData[brand].sales_2024 += Number(item.sales_qty_2024_total || 0);
      });
      
      // 获取品牌列表和对应的2024年销售数据（显示最新年份）
      const brands = Object.keys(brandData).slice(0, 12); // 最多显示12个品牌
      const salesData = brands.map(brand => Math.round(brandData[brand].sales_2024));
      
      chart.setOption({
        grid: { left: '3%', right: '4%', top: '20%', bottom: '3%', containLabel: true },
        tooltip: {
          trigger: 'axis',
          formatter: (params: any) => {
            const brand = params[0].name;
            const data = brandData[brand];
            return `${brand}<br/>` +
              `2022年: ${data.sales_2022.toLocaleString()} 条<br/>` +
              `2023年: ${data.sales_2023.toLocaleString()} 条<br/>` +
              `2024年: ${data.sales_2024.toLocaleString()} 条`;
          },
          backgroundColor: 'rgba(0, 50, 100, 0.9)',
          borderColor: '#00d4ff',
          borderWidth: 1,
          textStyle: { color: '#00d4ff' }
        },
        xAxis: {
          type: 'category',
          data: brands,
          axisLine: { lineStyle: { color: '#00d4ff' } },
          axisLabel: { 
            color: '#00d4ff', 
            rotate: 45,
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          name: '销量(条)',
          nameTextStyle: { 
            color: '#00d4ff', 
            align: 'left',
            padding: [0, 0, 0, 0]
          },
          nameGap: 15,
          axisLine: { lineStyle: { color: '#00d4ff' } },
          splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } },
          axisLabel: { 
            color: '#00d4ff',
            formatter: (value: number) => {
              if (value >= 10000) return (value / 10000).toFixed(1) + 'w';
              return value.toString();
            }
          }
        },
        series: [{
          data: salesData,
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ffd700' },
              { offset: 1, color: '#ff8c00' }
            ])
          },
          barWidth: '40%'
        }]
      });
    } catch (error) {
      console.error('获取销售数据失败:', error);
      // 使用默认数据
      chart.setOption({
        grid: { left: '3%', right: '4%', top: '20%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: ['暂无数据'],
          axisLine: { lineStyle: { color: '#00d4ff' } },
          axisLabel: { color: '#00d4ff' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#00d4ff' } },
          splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } },
          axisLabel: { color: '#00d4ff' }
        },
        series: [{
          data: [0],
          type: 'bar',
          itemStyle: { color: '#ff8c00' }
        }]
      });
    }
    
    charts.push(chart);
  }

  // 图表2 - 2023年品牌销量（圆角柱状图）
  if (chart2.value) {
    const chart = echarts.init(chart2.value);
    
    try {
      // 从API获取销售数据
      const res = await listTable({});
      const dataList = Array.isArray(res) ? res : (res.rows || []);
      
      // 按品牌汇总2023年数据
      const brandData: any = {};
      dataList.forEach((item: any) => {
        const brand = item.brand || '未知品牌';
        if (!brandData[brand]) {
          brandData[brand] = 0;
        }
        brandData[brand] += Number(item.sales_qty_2023_total || 0);
      });
      
      // 获取品牌列表和对应的2023年销售数据
      const brands = Object.keys(brandData).slice(0, 12);
      const salesData = brands.map(brand => Math.round(brandData[brand]));
      
      chart.setOption({
        grid: { left: '3%', right: '4%', top: '20%', bottom: '3%', containLabel: true },
        tooltip: {
          trigger: 'axis',
          formatter: (params: any) => {
            const brand = params[0].name;
            const value = params[0].value;
            return `${brand}<br/>2023年: ${value.toLocaleString()} 条`;
          },
          backgroundColor: 'rgba(0, 50, 100, 0.9)',
          borderColor: '#00ff88',
          borderWidth: 1,
          textStyle: { color: '#00ff88' }
        },
        xAxis: {
          type: 'category',
          data: brands,
          axisLine: { lineStyle: { color: '#00ff88' } },
          axisLabel: { 
            color: '#00ff88', 
            rotate: 45,
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          name: '销量(条)',
          nameTextStyle: { 
            color: '#00ff88', 
            align: 'left',
            padding: [0, 0, 0, 0]
          },
          nameGap: 15,
          axisLine: { lineStyle: { color: '#00ff88' } },
          splitLine: { lineStyle: { color: 'rgba(0, 255, 136, 0.1)' } },
          axisLabel: { 
            color: '#00ff88',
            formatter: (value: number) => {
              if (value >= 10000) return (value / 10000).toFixed(1) + 'w';
              return value.toString();
            }
          }
        },
        series: [{
          data: salesData,
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00ff88' },
              { offset: 1, color: '#00d4aa' }
            ]),
            borderRadius: [8, 8, 0, 0] // 圆角效果
          },
          barWidth: '45%',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(0, 255, 136, 0.1)'
          }
        }]
      });
    } catch (error) {
      console.error('获取2023年销售数据失败:', error);
      chart.setOption({
        grid: { left: '3%', right: '4%', top: '20%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: ['暂无数据'],
          axisLine: { lineStyle: { color: '#00ff88' } },
          axisLabel: { color: '#00ff88' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#00ff88' } },
          splitLine: { lineStyle: { color: 'rgba(0, 255, 136, 0.1)' } },
          axisLabel: { color: '#00ff88' }
        },
        series: [{ data: [0], type: 'bar', itemStyle: { color: '#00ff88' } }]
      });
    }
    
    charts.push(chart);
  }

  // 图表3 - 2022年品牌销量（带阴影柱状图）
  if (chart3.value) {
    const chart = echarts.init(chart3.value);
    
    try {
      // 从API获取销售数据
      const res = await listTable({});
      const dataList = Array.isArray(res) ? res : (res.rows || []);
      
      // 按品牌汇总2022年数据
      const brandData: any = {};
      dataList.forEach((item: any) => {
        const brand = item.brand || '未知品牌';
        if (!brandData[brand]) {
          brandData[brand] = 0;
        }
        brandData[brand] += Number(item.sales_qty_2022_total || 0);
      });
      
      // 获取品牌列表和对应的2022年销售数据
      const brands = Object.keys(brandData).slice(0, 12);
      const salesData = brands.map(brand => Math.round(brandData[brand]));
      
      chart.setOption({
        grid: { left: '3%', right: '4%', top: '20%', bottom: '3%', containLabel: true },
        tooltip: {
          trigger: 'axis',
          formatter: (params: any) => {
            const brand = params[0].name;
            const value = params[0].value;
            return `${brand}<br/>2022年: ${value.toLocaleString()} 条`;
          },
          backgroundColor: 'rgba(0, 50, 100, 0.9)',
          borderColor: '#00d4ff',
          borderWidth: 1,
          textStyle: { color: '#00d4ff' }
        },
        xAxis: {
          type: 'category',
          data: brands,
          axisLine: { lineStyle: { color: '#00d4ff' } },
          axisLabel: { 
            color: '#00d4ff', 
            rotate: 45,
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          name: '销量(条)',
          nameTextStyle: { 
            color: '#00d4ff', 
            align: 'left',
            padding: [0, 0, 0, 0]
          },
          nameGap: 15,
          axisLine: { lineStyle: { color: '#00d4ff' } },
          splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } },
          axisLabel: { 
            color: '#00d4ff',
            formatter: (value: number) => {
              if (value >= 10000) return (value / 10000).toFixed(1) + 'w';
              return value.toString();
            }
          }
        },
        series: [{
          data: salesData,
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00d4ff' },
              { offset: 0.5, color: '#0080ff' },
              { offset: 1, color: '#0040ff' }
            ]),
            shadowColor: 'rgba(0, 212, 255, 0.5)',
            shadowBlur: 10,
            shadowOffsetY: 5
          },
          barWidth: '50%',
          emphasis: {
            itemStyle: {
              shadowBlur: 20,
              shadowColor: 'rgba(0, 212, 255, 0.8)'
            }
          }
        }]
      });
    } catch (error) {
      console.error('获取2022年销售数据失败:', error);
      chart.setOption({
        grid: { left: '3%', right: '4%', top: '20%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          data: ['暂无数据'],
          axisLine: { lineStyle: { color: '#00d4ff' } },
          axisLabel: { color: '#00d4ff' }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#00d4ff' } },
          splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.1)' } },
          axisLabel: { color: '#00d4ff' }
        },
        series: [{ data: [0], type: 'bar', itemStyle: { color: '#00d4ff' } }]
      });
    }
    
    charts.push(chart);
  }

  // 定义营业部颜色
  const departmentColors = [
    { start: '#00d4ff', end: '#0080ff' },  // 蓝色
    { start: '#00ff88', end: '#00d4aa' },  // 绿色
    { start: '#ffd700', end: '#ff8c00' },  // 金色
    { start: '#7fff00', end: '#32cd32' },  // 黄绿色
    { start: '#ff69b4', end: '#ff1493' },  // 粉色
    { start: '#00ffff', end: '#008b8b' },  // 青色
    { start: '#ff6347', end: '#dc143c' },  // 番茄红
    { start: '#9370db', end: '#663399' },  // 紫色
  ];

  // 获取API数据并按地域（营业厅）汇总
  try {
    const res = await listTable({});
    const dataList = Array.isArray(res) ? res : (res.rows || []);
    
    // 按地域（营业厅）和年份汇总数据
    const deptData: any = {};
    dataList.forEach((item: any) => {
      const dept = item.region || '未知地域';
      if (!deptData[dept]) {
        deptData[dept] = {
          sales_2022: 0,
          sales_2023: 0,
          sales_2024: 0
        };
      }
      deptData[dept].sales_2022 += Number(item.sales_qty_2022_total || 0);
      deptData[dept].sales_2023 += Number(item.sales_qty_2023_total || 0);
      deptData[dept].sales_2024 += Number(item.sales_qty_2024_total || 0);
    });

    const departments = Object.keys(deptData);
    
    // 2024年营业部销量饼图
    if (pieChart2024.value) {
      const chart = echarts.init(pieChart2024.value);
      const pieData2024 = departments.map((dept, index) => {
        const colorIndex = index % departmentColors.length;
        const colors = departmentColors[colorIndex] || { start: '#00d4ff', end: '#0080ff' };
        return {
          value: Math.round(deptData[dept].sales_2024),
          name: dept,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors.start },
              { offset: 1, color: colors.end }
            ])
          }
        };
      });
      
      chart.setOption({
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}条 ({d}%)',
          backgroundColor: 'rgba(0, 50, 100, 0.9)',
          borderColor: '#00d4ff',
          borderWidth: 1,
          textStyle: { color: '#00d4ff' }
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          textStyle: { color: '#00d4ff', fontSize: 11 },
          itemWidth: 10,
          itemHeight: 10
        },
        series: [{
          name: '2024年营业部销量',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['40%', '50%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 6,
            borderColor: 'rgba(0, 50, 100, 0.5)',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}\n{d}%',
            color: '#00d4ff',
            fontSize: 10,
            lineHeight: 12
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 12,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 212, 255, 0.5)'
            }
          },
          labelLine: {
            show: true,
            lineStyle: { color: '#00d4ff', width: 1 }
          },
          data: pieData2024
        }]
      });
      charts.push(chart);
    }

    // 2023年营业部销量饼图
    if (pieChart2023.value) {
      const chart = echarts.init(pieChart2023.value);
      const pieData2023 = departments.map((dept, index) => {
        const colorIndex = index % departmentColors.length;
        const colors = departmentColors[colorIndex] || { start: '#00ff88', end: '#00d4aa' };
        return {
          value: Math.round(deptData[dept].sales_2023),
          name: dept,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors.start },
              { offset: 1, color: colors.end }
            ])
          }
        };
      });
      
      chart.setOption({
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}条 ({d}%)',
          backgroundColor: 'rgba(0, 50, 100, 0.9)',
          borderColor: '#00ff88',
          borderWidth: 1,
          textStyle: { color: '#00ff88' }
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          textStyle: { color: '#00ff88', fontSize: 11 },
          itemWidth: 10,
          itemHeight: 10
        },
        series: [{
          name: '2023年营业部销量',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['40%', '50%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 6,
            borderColor: 'rgba(0, 50, 100, 0.5)',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}\n{d}%',
            color: '#00ff88',
            fontSize: 10,
            lineHeight: 12
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 12,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 255, 136, 0.5)'
            }
          },
          labelLine: {
            show: true,
            lineStyle: { color: '#00ff88', width: 1 }
          },
          data: pieData2023
        }]
      });
      charts.push(chart);
    }

    // 2022年营业部销量饼图
    if (pieChart2022.value) {
      const chart = echarts.init(pieChart2022.value);
      const pieData2022 = departments.map((dept, index) => {
        const colorIndex = index % departmentColors.length;
        const colors = departmentColors[colorIndex] || { start: '#ffd700', end: '#ff8c00' };
        return {
          value: Math.round(deptData[dept].sales_2022),
          name: dept,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors.start },
              { offset: 1, color: colors.end }
            ])
          }
        };
      });
      
      chart.setOption({
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}条 ({d}%)',
          backgroundColor: 'rgba(0, 50, 100, 0.9)',
          borderColor: '#ffd700',
          borderWidth: 1,
          textStyle: { color: '#ffd700' }
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          textStyle: { color: '#ffd700', fontSize: 11 },
          itemWidth: 10,
          itemHeight: 10
        },
        series: [{
          name: '2022年营业部销量',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['40%', '50%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 6,
            borderColor: 'rgba(0, 50, 100, 0.5)',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}\n{d}%',
            color: '#ffd700',
            fontSize: 10,
            lineHeight: 12
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 12,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(255, 215, 0, 0.5)'
            }
          },
          labelLine: {
            show: true,
            lineStyle: { color: '#ffd700', width: 1 }
          },
          data: pieData2022
        }]
      });
      charts.push(chart);
    }
  } catch (error) {
    console.error('获取营业部销售数据失败:', error);
    // 使用默认数据
    const defaultData = [
      { value: 100, name: '营业部A' },
      { value: 80, name: '营业部B' },
      { value: 60, name: '营业部C' }
    ];

    if (pieChart2024.value) {
      const chart = echarts.init(pieChart2024.value);
      chart.setOption({
        backgroundColor: 'transparent',
        series: [{
          type: 'pie',
          radius: ['30%', '55%'],
          data: defaultData
        }]
      });
      charts.push(chart);
    }

    if (pieChart2023.value) {
      const chart = echarts.init(pieChart2023.value);
      chart.setOption({
        backgroundColor: 'transparent',
        series: [{
          type: 'pie',
          radius: ['30%', '55%'],
          data: defaultData
        }]
      });
      charts.push(chart);
    }

    if (pieChart2022.value) {
      const chart = echarts.init(pieChart2022.value);
      chart.setOption({
        backgroundColor: 'transparent',
        series: [{
          type: 'pie',
          radius: ['30%', '55%'],
          data: defaultData
        }]
      });
      charts.push(chart);
    }
  }
};

// 窗口大小改变时重新绘制图表
const handleResize = () => {
  charts.forEach(chart => chart.resize());
};

onMounted(async () => {
  updateTime();
  timer = setInterval(updateTime, 1000);

  setTimeout(async () => {
    await initCharts();
  }, 100);

  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  if (timer) clearInterval(timer);
  charts.forEach(chart => chart.dispose());
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.data-screen {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #0a1e3d 0%, #0f2744 50%, #0a1e3d 100%);
  color: #00d4ff;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  overflow: hidden;
  position: relative;
}

/* 背景装饰 */
.data-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 255, 136, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* 顶部标题栏 */
.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 40px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.1) 0%, transparent 50%, rgba(0, 212, 255, 0.1) 100%);
  border-bottom: 2px solid rgba(0, 212, 255, 0.3);
  position: relative;
  z-index: 10;
}

.screen-header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #00d4ff 50%, transparent 100%);
  animation: headerGlow 2s ease-in-out infinite;
}

@keyframes headerGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.header-left {
  width: 150px; /* 占位以保持标题居中 */
}

.header-center {
  flex: 1;
  text-align: center;
}

.main-title {
  font-size: 32px;
  font-weight: bold;
  background: linear-gradient(90deg, #00d4ff 0%, #00ff88 50%, #00d4ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 2px;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.datetime {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.date {
  font-size: 16px;
  color: #00d4ff;
}

.time {
  font-size: 24px;
  font-weight: bold;
  color: #00ff88;
  font-family: 'Courier New', monospace;
}

.week {
  padding: 8px 16px;
  background: rgba(0, 212, 255, 0.2);
  border: 1px solid #00d4ff;
  border-radius: 4px;
  font-size: 16px;
}

/* 主体内容 */
.screen-body {
  display: flex;
  height: calc(100vh - 80px);
  padding: 20px;
  gap: 20px;
}

.screen-left {
  flex: 0 0 28%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.screen-center-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 图表面板 */
.chart-panel {
  background: rgba(0, 50, 100, 0.3);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  padding: 15px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  flex: 1;
}

.chart-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #00d4ff 50%, transparent 100%);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.panel-title {
  font-size: 18px;
  font-weight: bold;
  color: #00d4ff;
}

.panel-subtitle {
  font-size: 14px;
  color: #00d4ff;
  opacity: 0.8;
}

.panel-body {
  height: calc(100% - 50px);
}

.chart-container {
  width: 100%;
  height: 100%;
}


/* 响应式 */
@media (max-width: 1600px) {
  .main-title {
    font-size: 24px;
  }

}
</style>
